   <script setup lang="ts">
   import { useRoute } from "vue-router";
   import { onMounted, ref } from "vue";
   import axios from "axios";
   const route = useRoute();
   console.log(route.query.id);
   const data = ref([]);

   onMounted(() => {
     axios.get(`http://localhost:8000/app/detail/`, {
       params: {
         id: route.query.id
       }
     })
     .then(res => {
       console.log(res.data);
       data.value = res.data.data;
     })
     .catch(error => {
       console.error("Error fetching data:", error);
     });
   });
   </script>

   <template>
     <div class="container">
       <div class="product-info">
         <h1>{{ data.name }}</h1>
         <p><strong>价格:</strong> {{ data.price }}</p>
         <p><strong>库存:</strong> {{ data.stock }}</p>
         <p><strong>描述:</strong> {{ data.description }}</p>
         <img :src="'http://localhost:8000/' + data.image" alt="Product Image" width="200px" />
       </div>
     </div>
   </template>

   <style scoped>
   .container {
     display: flex;
     justify-content: center;
     align-items: center;
     padding: 20px;
   }

   .product-info {
     max-width: 600px;
     text-align: center;
     background-color: #f9f9f9;
     border: 1px solid #ddd;
     border-radius: 8px;
     padding: 20px;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
   }

   h1 {
     font-size: 24px;
     margin-bottom: 10px;
   }

   p {
     font-size: 16px;
     margin: 5px 0;
   }

   strong {
     font-weight: bold;
   }

   img {
     margin-top: 20px;
     border-radius: 4px;
   }
   </style>
   